<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery EasyUI Demo for Java</title>
        <!-- 主题可以通过themes/下的easyui.css进行更换 -->
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/ui-cupertino/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/demo/demo.css">
        <script type="text/javascript" src="jquery-easyui-1.9.4/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.9.4/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.9.4/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript">
            var url;

            function deleteUser() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $.messager.confirm("系统提示", "您确定要删除这条记录吗?", function(r) {
                        if (r) {
                            $.post('userDelete', {
                                delId: row.id
                            }, function(result) {
                                if (result.success) {
                                    $.messager.alert("系统提示", "已成功删除这条记录!");
                                    $("#dg").datagrid("reload"); //刷新前端
                                } else {
                                    $.messager.alert("系统提示", result.errorMsg);
                                }
                            }, 'json');
                        }
                    });
                }
            }

            function newUser() {
                $("#dlg").dialog('open').dialog('setTitle', '添加用户');
                $('#fm').form('clear');
                url = 'userSave'; //Ajax发送至后端服务器
            }


            function editUser() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $("#dlg").dialog('open').dialog('setTitle', '编辑用户');
                    $('#fm').form('load', row); //加载当前行的数据
                    url = 'userSave?id=' + row.id; //Ajax发送至后端服务器
                }
            }


            function saveUser() {
                $('#fm').form('submit', {
                    url: url, //Ajax发送至后端服务器对应的url
                    onSubmit: function() {
                        return $(this).form('validate');
                    },
                    success: function(result) {
                        var result = eval('(' + result + ')'); //转化为前端JSON
                        if (result.errorMsg) {
                            $.messager.alert("系统提示", result.errorMsg);
                            return;
                        } else {
                            $.messager.alert("系统提示", "保存成功");
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload"); //刷新前端
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        <!-- url属性表示要从Web服务器上请求数据，且与后端交互的是JSON串。交互通过Ajax（XHR）来完成。 -->
        <!-- 可以将jQuery EasyUI涉及到的组件都放在这个页面上统一调度。 -->
        <table id="dg" title="用户管理" class="easyui-datagrid" style="width:1024px;height:450px" url="userList" toolbar="#toolbar"
         pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
            <thead>
                <tr>
                    <th field="id" width="50" hidden="true">编号</th>
                    <th field="name" width="50">姓名</th>
                    <th field="phone" width="50">电话</th>
                    <th field="email" width="50">Email</th>
                    <th field="qq" width="50">QQ</th>
                </tr>
            </thead>
        </table>
        
        <div id="toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a>
        </div>

        <div id="dlg" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
            <form id="fm" method="post">
                <table cellspacing="10px;">
                    <tr>
                        <td>姓名：</td>
                        <td><input name="name" class="easyui-validatebox" required="true" style="width: 200px;"></td>
                    </tr>
                    <tr>
                        <td>联系电话：</td>
                        <td><input name="phone" class="easyui-validatebox" required="true" style="width: 200px;"></td>
                    </tr>
                    <tr>
                        <td>Email：</td>
                        <td><input name="email" class="easyui-validatebox" validType="email" required="true" style="width: 200px;"></td>
                    </tr>
                    <tr>
                        <td>QQ：</td>
                        <td><input name="qq" class="easyui-validatebox" required="true" style="width: 200px;"></td>
                    </tr>
                </table>
            </form>
        </div>

        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
        </div>
    </body>
</html>